<template>
  <div id="informationAcquisition">
    <div class="header">
      <div class="select">
        <div class="box box-active" @click="active = 1">
          <div :class="selectTypeNum == 1 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectTypeNum = 1">
            在职 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
          <div :class="selectTypeNum == 2 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectTypeNum = 2">
            全职 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
          <div :class="selectTypeNum == 3 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectTypeNum = 3">
            兼职 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
          <div :class="selectTypeNum == 4 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectTypeNum = 4">
            外包 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
        </div>
        <div class="box box-active" @click="active = 2">
          <div :class="selectStatus == 1 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectStatus = 1">
            报送人员 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
          <div :class="selectStatus == 2 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectStatus = 2">
            待报送 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
          <div :class="selectStatus == 3 ? 'item item-title tyle_selected' : 'item item-title'" @click="selectStatus = 3">
            已报送 <span class="title-num">{{ detail.activeEmployeeNumber }}</span> 人
          </div>
        </div>
      </div>
      <div class="Query">
        <div class="left">
          <el-form class="form">
            <el-form-item>
              <el-input v-model="query.keyWord" placeholder="姓名/工号/身份证号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.staus" placeholder="请选择员工状态">
                <el-option value="在职">在职</el-option>
                <el-option value="离职">离职</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.status" placeholder="报送状态">
                <el-option value="待报送">待报送</el-option>
                <el-option value="报送成功">报送成功</el-option>
                <el-option value="报送失败">报送失败</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.status" placeholder="身份验证状态">
                <el-option value="待验证">待验证</el-option>
                <el-option value="验证成功">验证成功</el-option>
                <el-option value="验证失败">验证失败</el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-popover placement="bottom" width="1000" trigger="click">
            <el-form class="form">
              <el-form-item>
                <el-select v-model="query.type" placeholder="请选择国籍">
                  <el-option value="中国">中国</el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="query.project" placeholder="关联部门">
                  <el-option value="研发部">研发部</el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button slot="reference">更多</el-button>
          </el-popover>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="right">
          <el-button type="primary">一键报送</el-button>
          <el-dropdown @command="handleCommand">
            <el-button type="primary"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">特殊情形处理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="content">
      <el-table :data="rows" height="100%">
        <el-table-column label="序号" min-width="35">
          <template slot-scope="{ row }">
            <el-checkbox>{{ row.num }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="40"></el-table-column>
        <el-table-column prop="workNumber" label="工号" min-width="50" />
        <el-table-column prop="idType" label="证件类型" min-width="60" />
        <el-table-column prop="idCard" label="证件号码" min-width="100" />
        <el-table-column prop="children" label="性别"></el-table-column>
        <el-table-column prop="continue" label="员工类型"></el-table-column>
        <el-table-column prop="housing" label="员工状态"></el-table-column>
        <el-table-column prop="support" label="报送状态"></el-table-column>
        <el-table-column prop="lookAfter" label="身份验证状态"></el-table-column>
        <el-table-column prop="status" label="任职受雇类型"></el-table-column>
        <el-table-column prop="companyname" label="国籍"></el-table-column>
        <el-table-column prop="updateTime" label="关联部门"></el-table-column>
        <el-table-column prop="updateTime" label="所属单位部门"></el-table-column>
        <el-table-column prop="updateTime" label="操作">
          <template>
            <span class="fun">报送</span>
            <span class="fun" @click="edit">编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="特殊情形处理" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="dialog_content">
        <div class="one">
          特殊情形选择:
          <el-select v-model="specialCases" @change="specialCasesChange">
            <el-option value="1" label="人员添加"></el-option>
            <el-option value="2" label="信息更新"></el-option>
            <el-option value="3" label="删除重复人员"></el-option>
          </el-select>
        </div>
        <div class="two">
          <!-- 人员添加 -->
          <el-form class="form" label-width="130px" v-if="specialCases == 1">
            <el-form-item style="border-bottom: 1px solid;padding-bottom: 10px;">
              <el-radio v-model="radio" label="1">居民身份证号码不符合一般赋码规则</el-radio>
              <el-radio v-model="radio" label="2">除居民身份证以外已从税务机关取得纳税人识别号的人员</el-radio>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input placeholder="请输入名字"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-select v-model="query.status" placeholder="请选择证件类型">
                <el-option value="身份证">身份证</el-option>
                <el-option value="待反馈">护照</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item label="任职受雇从业类型">
              <el-select v-model="query.status" placeholder="请选择任职受雇从业类型">
                <el-option value="身份证">身份证</el-option>
                <el-option value="待反馈">护照</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="任职受雇从业日期">
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>
            </el-form-item>
          </el-form>
          <!-- 信息更新 -->
          <el-form class="form" label-width="70px" v-if="specialCases == 2">
            <el-from-item> 注：当已报送的人员信息不正确，如：更改姓名、身份证号时，即可通过该功能，更新人员信息和并档信息</el-from-item>
            <el-form-item label="姓名">
              <el-input placeholder="请输入名字"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-select v-model="query.status" placeholder="请选择证件类型">
                <el-option value="身份证">身份证</el-option>
                <el-option value="待反馈">护照</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input placeholder="请输入证件号码"></el-input>
            </el-form-item>
          </el-form>
          <el-form class="form" label-width="70px" v-if="specialCases == 3">
            <el-from-item> 注：当已报送的人员信息重复时，通过该功能可删除重复的错误身份信息，删除后，本地申报信息将自动归集到正确的身份信息下</el-from-item>
            <el-form-item label="姓名">
              <el-input placeholder="请输入名字"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-select v-model="query.status" placeholder="请选择证件类型">
                <el-option value="身份证">身份证</el-option>
                <el-option value="待反馈">护照</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input placeholder="请输入证件号码"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "informationAcquisition",
  methods: {
    edit() {
      this.IsEdit = !this.IsEdit;
    },
    handleCommand(command) {
      if (command == 1) {
        this.dialogVisible = true;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    }
  },
  created() {
    var date = new Date();
    var month = date.getFullYear() + "-" + (date.getMonth() > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1));
    this.query.month = month;
  },
  data() {
    return {
      query: { month: "", keyWord: "", company: "", status: "" },
      rows: [
      
      ],
      IsEdit: false,
      detail: {
        activeEmployeeNumber: 0
      },
      dialogVisible: false,
      selectTypeNum: 1,
      selectStatus: 1,
      specialCases: "1"
    };
  }
};
</script>

<style lang="less" scoped>
#informationAcquisition {
  padding: 20px;
  .header {
    margin-top: 5px;
    .month {
      font-weight: 900;
      .el-date-editor {
        :deep(.el-input__inner ){
          border-bottom: 0 !important;
          font-size: 19px;
          font-weight: 600;
        }
      }
    }
    .Query {
      margin-top: 15px;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .form {
          display: inline-flex;
          .el-form-item {
            margin-right: 8px;
          }
        }
      }
    }

    .select {
      width: 100%;
      height: 90px;
      background: #f6f7fb;
      display: flex;
      padding: 10px;
      .box {
        position: relative;
        box-shadow: 0 2px 12px 0 #cccccc20;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 16px;
        background: #fff;
        margin-right: 10px;
        // margin-bottom: 10px;
        // padding: 10px;
        border: 1px solid #fff;
        cursor: pointer;
        .tyle_selected {
          color: #a5dcb6;
        }
        &::after {
          content: "";
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-right: 8px solid transparent;
          border-left: 8px solid #dce1e9;
          transform: rotateZ(45deg);
          position: absolute;
          right: -3px;
          bottom: -3px;
        }
        &-active::after {
          border-left: 8px solid #a5dcb6;
        }
        &-active {
          border: 1px solid #a5dcb6;
        }
        &:nth-last-child(1) {
          margin-right: 0;
        }
        &:nth-child(1) {
          flex: 5;
        }
        &:nth-child(2) {
          flex: 3;
        }
        &:nth-child(3) {
          flex: 2;
        }

        .item {
          width: 100%;
          padding: 0 30px;
          text-align: center;
          border-left: 1px solid #cccccc60;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:nth-child(1) {
            border-left: none;
          }
          .title {
            color: #333;
            font-size: 14px;
          }
          .num {
            color: #3ca1e8;
            font-size: 13px;
          }
        }
        .item-title {
          display: block;
          .title-num {
            font-size: 25px;
          }
        }
      }
    }
  }
  .content {
    .fun {
      color: #31a2f2;
      cursor: pointer;
      margin-left: 8px;
    }
  }
}
.dialog_content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  .one {
    display: flex;
    flex-flow: row;
    margin-bottom: 15px;
    .el-select {
      width: 50%;
    }
  }
  .two {
    width: 100%;
    box-shadow: 0px 0px 4px #888888;
    .form {
      padding: 10px 50px 10px 20px;
      display: flex;
      flex-flow: column;
      .el-form-item {
        display: flex;
        margin-bottom: 0 !important;
        :deep(.el-form-item__content) {
          margin-left: 0 !important;
        }
      }
    }
  }
}

.el-popover {
  .form {
    padding: 10px 50px 10px 20px;
    display: flex;
    .el-form-item {
      margin-right: 8px;
      margin-top: 18px;
    }
  }
}
</style>
